<template>
	<view class="category-wrap" :data-theme="theme()" :class="theme() || ''">
		<!-- #ifdef APP-PLUS -->
		<header-bar></header-bar>
		<!-- #endif -->
		<!-- 搜索框 -->
		<view class="index-search-box-cate d-b-c" id="searchBox"
			:style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;padding-top:' + topBarTop() + 'px'">
			<view class="index-search-cate flex-1 t-c" @click="gotoSearch">
				<text class="icon iconfont icon-sousuo"></text>
				<text class="ml10">{{ searchName }}</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="wx-top-right"></view>
			<!-- #endif -->
		</view>
		<!--类别列表-->
		<view class="category-content">
			<!--一级分类 大图-->
			<view class="cotegory-type cotegory-type-1" v-if="show_type == 10 && style == 3">
				<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
					<view class="list cotegory-padding">
						<view class="item" v-for="(item, index) in listData" :key="index"
							@click="gotoList(item.category_id)">
							<view class="pic">
								<image lazy-load :src="hasImages(item)" mode="widthFix"></image>
							</view>
							<view class="p-20-0 tc f28">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!--二级分类-->
			<template
				v-if="(show_type == 20 && (style==1 || style==2 || style==3)) || (show_type == 10 && (style == 1 || style == 2 || style == 4))">
				<view class="cotegory-type cotegory-type-3">
					<template v-if="showTwo()">
						<view class="category-tab f-s-0">
							<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
								<view class="cotegory-padding">
									<view :class="select_index == index ? 'item active' : 'item'"
										v-for="(item, index) in listData" :key="index" @click="selectCategory(index)">
										<text>{{ item.name }}</text>
									</view>
								</view>
							</scroll-view>
						</view>
					</template>
					<view class="category-tab f-s-0"
						v-if="(style == 1 && show_type == 20) || (style == 4 && show_type == 10)">
						<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
							<view class="cotegory-padding">
								<view :class="select_index == index ? 'item active' : 'item'"
									v-for="(item, index) in listData" :key="index" @click="selectCategory(index)">
									<text>{{ item.name }}</text>
								</view>
							</view>

						</scroll-view>
					</view>
					<!--二级分类 小图-->
					<view class="cotegory-type cotegory-type-2 flex-1" v-if="(style == 1 && show_type == 20)">
						<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
							<view class="list cotegory-padding">
								<view class="item" v-for="(item, index) in childlist" :key="index"
									@click="gotoList(item.category_id)">
									<image lazy-load :src="hasImages(item)" mode="widthFix"></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<!--一级分类 小图-->
					<view class="cotegory-type cotegory-type-2 flex-1" v-if="style == 1 && show_type == 10">
						<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
							<view class="list cotegory-padding">
								<view class="item" v-for="(item, index) in listData" :key="index"
									@click="gotoList(item.category_id)">
									<image lazy-load :src="hasImages(item)" mode="widthFix"></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="category-content pr" v-if="style == 2 || style == 3 || style == 4">
						<scroll-view scroll-y="true" class="scroll-Y scroll-3" lower-threshold="10"
							@scrolltolower="scrolltolowerFunc" :style="'height:' + scrollviewHigh + 'px;'">
							<!-- <view @click.stop="openPopCate = true" class="open-jiantou"
								v-if="show_type == 20 && (style == 2 || style == 3)">
								<view class="icon-jiantouxia-copy icon iconfont"></view>
							</view> -->
							<view class="catescroll2-top" :style="topBarHeight() == 0 ? 'position: fixed;' : 'position: fixed;top:' + topBarTop() + 'px'" v-if="show_type == 20 && (style == 2 || style == 3)">
								<view @click.stop="changeCategory(item.category_id)" class="catescroll2-top-item"
									:class="{ active: item.category_id == category_id }"
									v-for="(item, index) in childlist" :key="index">
									{{ item.name }}
								</view>
							</view>
							<view class="cotegory-padding" style="margin-top: 50px;">
								<view class="product-item-2"
									@click="gotoPage('/pages/product/detail/detail?product_id=' + item.product_id)"
									v-for="(item, index) in productlist" :key="index">
									<view class="image-boxs">
										<view class="sallsell-out" v-if="item.product_stock<=0">
											<view class="sallsell-out-btn">当前售罄</view>
										</view>
										<image lazy-load class="product-image-2" :src="item.product_image" mode=""></image>
									</view>
									<view class="flex-1 d-c d-b-s" style="height: 154rpx;">
										<view class="text-ellipsis-2 f28 gray3" style="font-size: 28rpx;font-weight: bold;">{{ item.product_name }}</view>
										<view class="theme-price f36 fb price-wrap" v-if="user.user_auth == 1">
											<text class="f24">￥</text>
											{{ item.unit_price }}/{{item.unit}}
											<template
												v-if="shoppingPrice && item.isActivity != 1 && isBuyFast() && item.is_virtual != 1&& item.custom_form == ''">
												<view class="add-shopping-wrap theme-bg"
													@click.stop="addShopping(item)">
													<view class="icon iconfont icon-icozhuanhuan"></view>
												</view>
											</template>
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="f26 catename">{{catename}}</view>
							<view class="list">
								<view class="item" v-for="(item,index) in childlist" :key="index"
									@click="gotoList(item.category_id)">
									<image lazy-load :src="hasImages(item)" mode="widthFix"></image>
									<text class="type-name">{{item.name}}</text>
								</view>
							</view> -->
						</scroll-view>
					</view>
				</view>
			</template>

		</view>
		<!-- 结算弹窗 -->
		<categoryMaskVue ref="categoryMaskRef" :dataList="productArr" @get-shopping-num="getShoppingNum" />
		<!-- 快速结算 -->
		<template v-if="isBuyFast()">
			<view class="shopping d-b-c customTabBar" id="shopping">
				<view class="shopping-l d-s-c">
					<view class="shopping-circle" @click="lookProduct">
						<view class="shopping-icon icon iconfont icon-icozhuanhuan"></view>
						<view class="shopping-num" v-if="shoppingNum && shoppingNum!=0">{{ shoppingNum }}</view>
					</view>
					<view class="shopping-price d-s-c">
						<view class="shopping-symbol">￥</view>
						<view>{{ shoppingPrice }}</view>
					</view>
				</view>
				<button class="shopping-r" @click="Submit">去结算</button>
			</view>
		</template>
		<!-- #ifdef H5 -->
		<view id="footBottom" v-if="isDomHeight"></view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view id="footBottom" v-if="isDomHeight && osName!='android'"></view>
		<!-- #endif -->
		<tabBar :isScroll="true"></tabBar>
		<!--购物确定-->
		<spec :isPopup="isPopup" :productModel="productModel" @close="closePopup"></spec>
		<view @click.stop="openPopCate = false" class="pop-bg" v-if="openPopCate">
			<view class="pop-cate">
				<view class="ww100" :style="'height:'+searchHeight+'px;'"></view>
				<view class="pop-cate-item text-ellipsis" @click="changeCategory(item.category_id)"
					:class="{ active: item.category_id == category_id }" v-for="(item, index) in childlist"
					:key="index">
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import spec from '@/pages/product/detail/popup/spec.vue';
	import categoryMaskVue from './categoryMask.vue';
	import throttle from "@/common/throttle.js";
	export default {
		components: {
			spec,
			categoryMaskVue,
		},
		data() {
			return {
				loading: true,
				searchName: "搜索商品",
				/*展示方式*/
				show_type: 3,
				style: 1,
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*数据*/
				listData: [],
				/*子类数据*/
				childlist: [],
				/*当前选中的分类*/
				select_index: 0,
				catename: "全部商品",
				productlist: [],
				page: 1,
				category_id: 0,
				tableData: [],
				isLogin: false,
				shoppingNum: 0,
				shoppingPrice: null,
				productModel: {},
				isPopup: false,
				specData: null,
				detail: null,
				isDomHeight: true,
				shoppingHeight: 0,
				searchHeight: 0,
				footerHeight: 0,
				productArr: [],
				url: "",
				platFormType: "",
				osName: '',
				openPopCate: false,
				user: {
					user_id: 0,
					user_auth: 0,
					user_order: 0,
				},
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(e) {
			/*分类id*/
			this.category_id = e.category_id || 0;
			// console.log(111,this.category_id);
			const platFormType = uni.getSystemInfoSync().uniPlatform
			let osName = ''
			uni.getSystemInfo({
				success: function(res) {
					osName = res.osName
				}
			});
			this.osName = osName;
			this.platFormType = platFormType;
			//#ifdef H5
			if (this.isWeixin()) {
				this.url = window.location.href;
			}
			//#endif
		},
		mounted() {
			this.init();
		},
		onShow() {
			this.productlist = [];
			this.no_more = false;
			this.page = 1;
			this.select_index = 0;
			this.getData();
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.productlist.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			},
		},
		/**
		 * 设置分享内容
		 */
		onShareAppMessage() {
			let self = this;
			return {
				title: self.templet.share_title,
				path: "/pages/product/category?" + self.getShareUrlParams(),
			};
		},
		methods: {
			lookProduct() {
				this.$refs.categoryMaskRef.open();
			},
			isBuyFast() {
				if (this.isLogin) {
					if (this.isLogin && (this.show_type == 10 && this.style == 4) || (this.show_type == 20 && this.style ==
							3)) {
						let height = this.phoneHeight - this.searchHeight - this.shoppingHeight;
						// #ifdef H5
						this.scrollviewHigh = height - this.footerHeight;
						// #endif
						// #ifndef H5
						this.scrollviewHigh = height - this.footerHeight;
						// #endif
						return true
					}
				}
				// #ifdef H5
				this.scrollviewHigh = this.phoneHeight - this.searchHeight - this.footerHeight;
				// #endif
				// #ifndef H5
				this.scrollviewHigh = this.phoneHeight - this.searchHeight - this.footerHeight;
				// #endif
				return false
			},
			showTwo() {
				if (this.show_type == 20 && (this.style == 2 || this.style == 3)) {
					return true
				}
				if (this.show_type == 10 && this.style == 2) {
					return true
				}
				return false
			},
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('#searchBox');
						view.boundingClientRect(data => {
							self.searchHeight = data.height || 0;
						}).exec();
						let footBottomView = uni.createSelectorQuery().select('#footBottom');
						if (footBottomView) {
							footBottomView.boundingClientRect(data => {
								if (data && data.height) {
									self.footerHeight = data.height;
								}
							}).exec();
						}
						self.isDomHeight = false;
					}
				});
			},
			/*判断是否有图片*/
			hasImages(e) {
				if (e.images != null && e.images.file_path != null) {
					return e.images.file_path;
				} else {
					return "";
				}
			},

			/*获取数据*/
			getData() {
				let self = this;
				self.loading = true;
				self._get("product.category/index", {}, function(res) {
					/* self.listData = [
					  {
					    name: '全部商品',
					    category_id: 0,
					    child:[
					      {
					        category_id: 0,
					        name: '全部商品'
					      }
					    ]
					  }
					] */
					self.user.user_id = res.data.user.user_id;
					self.user.user_auth = res.data.user.user_auth;
					self.user.user_order = res.data.user_order;
					
					self.show_type = res.data.template.category_style;
					self.style = res.data.template.wind_style;
					self.listData = res.data.list;
					if (self.listData && self.listData.length > 0 && self.category_id == 0) {
						if (self.listData[0].child && self.show_type == 20) {
							self.category_id = self.listData[0].child[0].category_id;
							self.childlist = self.listData[0].child;
						} else {
							self.category_id = self.listData[0].category_id
						}
					}
					if(self.select_index == 0 && self.category_id != 0) {
						self.listData.forEach((item , index) =>{
							if(item.category_id == self.category_id) {
								self.select_index = index;
							};
						});

					}
					if (self.style == 2) {
						self.getProduct();
					} else if (
						(self.show_type == 10 && self.style == 4) ||
						(self.show_type == 20 && self.style == 3)
					) {
						self.getProduct();
						self.getShoppingNum();
					}
					// if (self.listData[0].child) {
					// 	self.childlist = self.listData[0].child;
					// 	self.changeCategory(self.childlist[0].category_id);
					// }
					self.background = res.data.background;
					self.loading = false;
				});
			},
			changeCategory(e) {
				this.category_id = e;
				this.productlist = [];
				this.page = 1;
				this.no_more = false;
				this.openPopCate = false;
				this.getProduct();
			},
			getCheckedIds() {
				let self = this;
				let arrIds = [];
				self.productArr.forEach(item => {
					arrIds.push(`${item.cart_id}`);
				});
				return arrIds;
			},
			/*去结算*/
			Submit() {
				if(this.user.user_order != '1') {
					uni.showToast({
						title: '请联系您的商务人员或拨打客服电话', // 弹窗的标题
						icon: 'none', // 使用内置的成功图标
						duration: 2000 // 弹窗显示持续2秒
					});
					return;
				}
				let arrIds = this.getCheckedIds();
				if (arrIds.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					});
					return false;
				}
				this.gotoPage('/pages/order/confirm-order?order_type=cart&cart_ids=' + arrIds);
			},
			/* 获取购物车数量 */
			getShoppingNum() {
				let self = this;
				self._post("product.Category/lists", {}, function(res) {
					const {
						data: {
							productList
						},
					} = res;
					self.isLogin = false;
					if (productList) {
						self.isLogin = true;
						self.tableData = productList;
						let total_num = 0;
						let totalPrice = 0;
						let productArr = [];
						if (productList && productList.length > 0) {
							productList.forEach((item) => {
								if (item.productList && item.productList.length > 0) {
									item.productList.forEach((pitem) => {
										productArr.push(pitem)
										total_num = total_num + pitem.total_num;
										totalPrice = totalPrice + parseFloat(pitem.total_num) *
											parseFloat(pitem.product_price);
									})
								}
							});
						}
						self.productArr = productArr;
						self.shoppingNum = total_num;
						self.shoppingPrice = totalPrice.toFixed(2);
					}
				}, err => {
					// self.getShoppingNum();
					self.productlist = [];
					self.no_more = false;
					self.page = 1;
					self.getData();
				});
			},
			/* 添加购物车初始化 */
			addShopping(item) {
				if (item.spec_type == 20) {
					this.getSpecData(item.product_id);
				} else {
					this.addSingleSpec(item.product_id);
				}
			},
			/* 单规格商品加入购物车 */
			addSingleSpec(product_id) {
				let self = this;
				self._post(
					"order.cart/add", {
						product_id: product_id,
						total_num: 1,
						spec_sku_id: 0,
					},
					function(res) {
						self.getShoppingNum();
					}
				);
			},
			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				console.log(1)
				if (self.no_more) {
					return;
				}
				self.page++;
				if (self.page <= self.last_page) {
					self.getProduct();
				} else {
					self.no_more = true;
				}
			},
			/* 获取多规格商品 */
			getSpecData(product_id) {
				let self = this;
				self._get(
					"product.product/detail", {
						product_id: product_id,
						url: self.url,
						visitcode: self.getVisitcode()
					},
					function(res) {
						if (res.data.specData) {
							self.isPopup = false;
							self.detail = res.data.detail;
							self.specData = res.data.specData;
							self.initSpecData(res.data.specData);
						} else {
							uni.showToast({
								title: "暂无规格，请于后台添加!",
								mask: false,
								duration: 1500,
								icon: "none",
							});
						}
					}
				);
			},
			/* 初始化规格弹窗 */
			initMaskPopup() {
				let obj = {
					specData: this.specData,
					detail: this.detail,
					productSpecArr: this.specData != null ? new Array(this.specData.spec_attr.length) : [],
					show_sku: {
						sku_image: '',
						price: 0,
						product_sku_id: 0,
						line_price: 0,
						stock: 0,
						product_sku_id: 0,
						sum: 1
					},
					plus_sku: null,
					type: 'card',
					plus_name: ''
				};
				this.productModel = obj;
				this.isPopup = true;
			},
			/*初始化多规格商品*/
			initSpecData(data) {
				for (let i in data.spec_attr) {
					for (let j in data.spec_attr[i].spec_items) {
						data.spec_attr[i].spec_items[j].checked = false;
					}
				}
				this.specData = data;
				this.initMaskPopup();
			},
			closePopup() {
				this.isPopup = false;
				this.getShoppingNum();
			},
			getProduct() {
				let self = this;
				let page = self.page;
				let category_id = self.category_id;
				let sortType = self.sortType;
				let sortPrice = self.sortPrice;
				self.loading = true;
				self._get(
					"product.product/lists", {
						page: page || 1,
						category_id,
						search: "",
						sortType: "",
						sortPrice: "",
						list_rows: 20,
					},
					function(res) {
						self.loading = false;
						self.productlist = self.productlist.concat(res.data.list.data);
						self.last_page = res.data.list.last_page;
						self.user = res.data.user;
						if (res.data.list.last_page <= 1) {
							self.no_more = true;
						}
					}
				);
			},
			/*选择分类*/
			selectCategory(e) {
				throttle(() => {
					if (this.show_type == 10) {
						this.select_index = e;
						this.catename = this.listData[this.select_index].name;
						this.changeCategory(this.listData[this.select_index].category_id);
					} else {
						if (this.listData[e].child) {
							this.childlist = this.listData[e].child;
							this.select_index = e;
							this.catename = this.listData[this.select_index].name;
							this.changeCategory(this.childlist[0].category_id);
						} else {
							this.select_index = e;
							this.childlist = [];
							this.catename = this.listData[this.select_index].name;
							this.changeCategory(this.listData[this.select_index].category_id);
						}
					}
				})
			},
			hasSelect() {
				let self = this;
			},
			/*跳转产品列表*/
			gotoList(e) {
				let category_id = e;
				let sortType = "all";
				let search = "";
				let sortPrice = 0;
				this.gotoPage(
					"/pages/product/list/list?category_id=" +
					category_id +
					"&sortType=" +
					sortType +
					"&search=" +
					search +
					"&sortPrice=" +
					sortPrice
				);
			},

			wxGetUserInfo: function(res) {
				if (!res.detail.iv) {
					uni.showToast({
						title: "您取消了授权,登录失败",
						icon: "none",
					});
					return false;
				}
			},

			/*跳转搜索页面*/
			gotoSearch() {
				this.gotoPage("/pages/product/search/search");
			},
		},
	};
</script>

<style lang="scss">
	@import "@/common/mixin.scss";
	$footer-tabBar-height: 50px;
	$shopping-height: 96rpx;

	page {
		min-height: 0;
	}

	.foot_ {
		height: $footer-tabBar-height;
		width: 100%;
	}

	.cotegory-padding {
		padding-bottom: calc($footer-tabBar-height + $shopping-height);
		box-sizing: border-box;
	}

	.cotegory-type {
		line-height: 40rpx;
		background: #ffffff;
	}

	.cotegory-type image {
		width: 100%;
	}

	.cotegory-type-1 .list {
		padding: 20rpx;
	}

	.cotegory-type-1 .list.cotegory-padding {
		padding-bottom: calc($footer-tabBar-height + $shopping-height);
		box-sizing: border-box;
	}

	.cotegory-type-1 .list .item {
		margin-top: 30rpx;
	}

	.cotegory-type-1 .list .item .pic {
		// border: 1px solid #e3e3e3;
		width: 710rpx;
		height: auto;
		overflow: hidden;
		border-radius: 8px;
	}

	.cotegory-type-1 .list .item image {
		width: 100%;
		height: 100%;
	}

	.cotegory-type-2 .list,
	.cotegory-type-3 .list {
		padding: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.cotegory-type-2 .list .item,
	.cotegory-type-3 .list .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.cotegory-type-3 .list .item {
		width: 140rpx;
		height: 200rpx;
		margin-top: 40rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
	}

	.cotegory-type-2 .list .item {
		padding: 0 16rpx;
		width: 33.3%;
		margin: 0;
		margin-bottom: 16rpx;
		height: 300rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.cotegory-type-2 .list .item image {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.cotegory-type-3 {
		display: flex;
	}

	.cotegory-type-3 .category-tab {
		width: 200rpx;
		background: #ffffff;
		@include background_color("opacify_background_0");
		// border-right: 1px solid #e3e3e3;
	}

	.showShopping {
		padding-bottom: $shopping-height;
		box-sizing: border-box;
	}

	.cotegory-type-3 .category-tab .item {
		padding: 40rpx 0;
		font-size: 26rpx;
		text-align: center;
		color: #666666;
		font-weight: bold;
	}

	.cotegory-type-3 .category-tab .item.active {
		position: relative;
		background: #ffffff;

		color: #333333;
	}

	.cotegory-type-3 .category-tab .item.active::after {
		position: absolute;
		content: "";
		top: 40rpx;
		bottom: 40rpx;
		left: 0;
		width: 6rpx;
		height: 22rpx;
		margin: auto;
		@include background_linear("titleft1", "titleft2", 180deg, 0%, 100%);
	}

	.cotegory-type-3 .category-content {
		flex: 1;
		// padding: 0 20rpx;
	}

	.cotegory-type-3 .list .item:nth-child(3n) {
		margin-right: 0;
	}

	.cotegory-type-3 .list .item image {
		width: 140rpx;
		height: 140rpx;
	}

	.cotegory-type-3 .list .item .type-name {
		display: block;
		margin-top: 20rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-overflow: ellipsis;
		width: 100%;
		color: #818181;
		font-size: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-align: center;
	}

	.scroll-3 {
		position: absolute;
		background: #ffffff;
		border-radius: 12px;
	}

	.catename {
		padding-top: 10rpx;
		line-height: 60rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.catescroll2-top {
		
		margin-top: 63px;
		width:calc(100vw - 104px);
		background: #fff;
		z-index: 9999;
		
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 20rpx 0;
		padding-left: 20rpx;
	}

	.open-jiantou {
		position: absolute;
		right: 0;
		top: 20rpx;
		height: 58rpx;
		z-index: 2;
		padding: 0 17rpx 0 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));

		.icon.icon-jiantouxia-copy {
			width: 58rpx;
			height: 58rpx;
			background: #F6F6F6;
			border-radius: 29rpx;
			font-size: 22rpx;
			color: #333;
			display: block;
			line-height: 58rpx;
			text-align: center;
		}

	}

	.catescroll2-top-item {
		// min-width: 142rpx;
		padding: 0 23rpx;
		height: 58rpx;
		background: #f6f6f6;
		border: 1rpx solid #f6f6f6;
		border-radius: 29rpx;
		margin-right: 14rpx;
		line-height: 58rpx;
		color: #666;
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.catescroll2-top-item.active {
		color: #fff;
		@include background_color("background_color");
		border: 1rpx solid #ee252a;
		@include border_color("border_color");
	}

	.product-item-2:first-child {
		margin-top: 20rpx;
	}

	.product-item-2 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 20rpx;
		margin-bottom: 25rpx;

		.image-boxs {
			margin-right: 20rpx;
			position: relative;
			border-radius: 20rpx;
			overflow: hidden;
			.sallsell-out {
				width: 194rpx;
				height: 194rpx;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(#000, 0.45);
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 1;
			
				.sallsell-out-btn {
					width: 106rpx;
					height: 46rpx;
					border-radius: 5rpx;
					border: 1px solid #ffffff;
					font-size: 24rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.product-image-2 {
				width: 194rpx;
				height: 194rpx;
				display: block;
			}
		}

	}

	.uni-scroll-view::-webkit-scrollbar,
	.catescroll2-top::-webkit-scrollbar {
		/*滚动条整体样式*/
		/*高宽分别对应横竖滚动条的尺寸*/
		display: block;
		width: 0rpx !important;
		height: 0rpx !important;
		-webkit-appearance: default-button;
	}

	.uni-scroll-view::-webkit-scrollbar-thumb,
	.catescroll2-top::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		background-color: #909399;
	}

	.uni-scroll-view::-webkit-scrollbar-track,
	.catescroll2-top::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #ededed;
		border-radius: 10px;
	}

	.price-wrap {
		position: relative;
		width: 100%;
	}

	.add-shopping-wrap {
		position: absolute;
		right: 0;
		top: 0;
		width: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 50%;

		.icon {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-weight: 400;
		}
	}

	#emptyShopping {
		width: 100%;
		height: $shopping-height;
		opacity: 0;
	}

	#footBottom {
		width: 100%;
		// height: $footer-tabBar-height;
		height: $footer-tabBar-height;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.shopping {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: $shopping-height;
		background: #FFFFFF;
		border-top: 1px solid #EEEEEE;
		padding: 0 34rpx;
		box-sizing: border-box;

		&.H5 {
			bottom: var(--window-bottom, 0);

		}

		&.customTabBar {
			bottom: calc(env(safe-area-inset-bottom) + $footer-tabBar-height);
			z-index: 2;
		}

		/* &.noH5:not(.customTabBar){
		bottom: 0;
	} */
		.shopping-l {
			.shopping-circle {
				width: 70rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #fff;
				@include background_color("background_color");
				border-radius: 50%;
				position: relative;
			}

			.shopping-icon {
				@include font_color('text_color1');
				font-size: 45rpx !important;
				text-align: center;
				margin-top: 3rpx;
			}

			.shopping-num {
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				@include background_color("price_color");
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
				font-size: 23rpx;
				color: #fff;
			}

			.shopping-price {
				@include font_color('font_color');
				font-size: 36rpx;
				margin-left: 42rpx;
				font-weight: bold;

				.shopping-symbol {
					font-size: 22rpx;
				}
			}
		}

		.shopping-r {
			width: 178rpx;
			height: 62rpx;
			line-height: 62rpx;
			@include background_color("background_color");
			border-radius: 31rpx;
			color: #FFFFFF;
			font-size: 30rpx;
		}
	}

	.pop-bg {
		position: fixed;
		z-index: 100;
		display: flex;
		align-items: flex-start;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);

		.pop-cate {
			background-color: #fff;
			width: 100%;
			padding-top: 15rpx;
			padding-left: 12rpx;
			padding-right: 12rpx;
			padding-bottom: 15rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			box-sizing: border-box;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			flex-wrap: wrap;

			.pop-cate-item {
				height: 58rpx;
				font-size: 24rpx;
				background: #F4F4F4;
				color: #666666;
				border-radius: 58rpx;
				padding: 0 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				white-space: nowrap;
				// margin-right: 24rpx;
				// margin-bottom: 30rpx;
				margin: 15rpx 12rpx;
			}

			.pop-cate-item.active {
				@include background_color('background_color');
				@include text_color('text_color1');
			}
		}
	}
</style>